<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-edit"
      >导入文件
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-edit"
                 @click="handleAdd">新增
      </el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#B3D8FD'}">

      <!--<el-table-column fixed align="center" min-width="80" label="关联ID" prop="ID"/>-->
      <el-table-column fixed align="center" min-width="100" label="关联类型" prop="type">
        <template slot-scope="scope">
          <span>{{ scope.row.type ? '1权益服务商' : '保代公司'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100" label="保险公司名称" prop="insuranceID"/>
      <el-table-column align="center" min-width="100" label="保代公司名称" prop="agentID"/>
      <el-table-column align="center" min-width="100" label="保理公司名称" prop="factoringID"/>
      <el-table-column align="center" min-width="100" label="垫资额度(万元)" prop="amount"/>
      <el-table-column align="center" min-width="100" label="垫资总日息(‱)" prop="interestAll"/>
      <el-table-column align="center" min-width="110" label="保理公司日息(‱)" prop="interestFactoring"/>
      <el-table-column align="center" min-width="200" label="服务费账户号" prop="serviceAccount"/>
      <el-table-column align="center" min-width="200" label="共管账户号" prop="account"/>
      <el-table-column align="center" min-width="200" label="共管账户名称" prop="accName"/>
      <el-table-column align="center" min-width="100" label="共管账户银行代码" prop="bankCode"/>
      <el-table-column align="center" min-width="200" label="共管账户联行号" prop="interBankNo"/>
      <el-table-column align="center" min-width="200" label="共管账户渠道编号" prop="channelNo"/>
      <el-table-column align="center" min-width="110" label="是否代付中转" prop="isRepay">
        <template slot-scope="scope">
          <span>{{ scope.row.isRepay ? '代付' : '不代付'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="200" label="代付账号" prop="repayAccount"/>
      <el-table-column align="center" min-width="170" label="创建时间" prop="timeAdd"/>
      <el-table-column fixed="right" align="center" label="操作" width="300" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="success" size="mini"
                     @click="handleBalance(scope.row)">余额
          </el-button>
          <el-button type="primary" size="mini"
                     @click="handleEdit(scope.row)">修改
          </el-button>
          <el-button type="danger" size="mini"
                     @click="doDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="getList"/>
    <!-- 余额对话框 -->
    <el-dialog :visible.sync="acclistDialogVisible" title="账户余额"  width="900px">
      <el-table v-loading="acclistLoading" :data="acclist" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#B3D8FD'}">
        <el-table-column fixed align="center" max-width="300" label="账户号" prop="account"/>
        <el-table-column align="center" min-width="100" label="当前余额(分为单位)" prop="balance"/>
        <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="success" size="mini"
                       @click="handleBankserial(scope.row)">明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--明细对话框-->
      <el-dialog :visible.sync="acclistDialogChildVisible" title="余额明细" width="1000px" append-to-body>
        <!--查询表单-->
        <el-form ref="editChildForm" :rules="editChildFormRules" :model="editChildForm" status-icon label-position="right"
                 label-width="100px" style="width: 900px;">
          <el-form-item label="收付方向" prop="payRecv">
            <el-radio-group v-model="editChildForm.payRecv">
              <el-radio :label="2">全部</el-radio>
              <el-radio :label="0">收款</el-radio>
              <el-radio :label="1">付款</el-radio>
            </el-radio-group>
          </el-form-item>
          <div style="display: flex">
            <el-form-item label="起始日期" prop="startDate">
              <el-date-picker
                v-model="editChildForm.startDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker
                v-model="editChildForm.endDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <div style="margin-left: 30px">
              <el-button type="primary" @click="doQuery" icon="el-icon-search">查询</el-button>
            </div>
          </div>
        </el-form>
        <!-- 明细查询结果 -->
        <el-table v-loading="bankserialListLoading" :data="bankserialList" element-loading-text="正在查询中。。。"
                  border fit highlight-current-row>
          <span style="text-align: left;display: inline-block;width: 100%;margin-left: -55%;" slot="empty">暂无数据</span>
          <el-table-column fixed align="center" min-width="100" label="流水号" prop="serialNo"/>
          <el-table-column align="center" min-width="100" label="凭证号" prop="voucherNo"/>
          <el-table-column align="center" min-width="150" label="交易订单号" prop="orderNo"/>
          <el-table-column align="center" min-width="120" label="交易时间" prop="tradeTime"/>
          <el-table-column align="center" min-width="100" label="收付方向" prop="payRecv"/>
          <el-table-column align="center" min-width="100" label="币种" prop="currency"/>
          <el-table-column align="center" min-width="200" label="金额(分为单位)" prop="money"/>
          <el-table-column align="center" min-width="100" label="收款账号" prop="recvAccount"/>
          <el-table-column align="center" min-width="110" label="收款户名" prop="recvAccountName"/>
          <el-table-column align="center" min-width="110" label="收款联行号" prop="recvBankNo"/>
          <el-table-column align="center" min-width="200" label="收款银行名称" prop="recvBankName"/>
          <el-table-column align="center" min-width="100" label="付款账号" prop="payAccount"/>
          <el-table-column align="center" min-width="200" label="付款户名" prop="payAccountName"/>
          <el-table-column align="center" min-width="200" label="付款联行号" prop="payBankNo"/>
          <el-table-column align="center" min-width="200" label="付款银行名称" prop="payBankName"/>
          <el-table-column align="center" min-width="200" label="用途" prop="usage"/>
          <el-table-column align="center" min-width="170" label="摘要" prop="abstract"/>
          <el-table-column align="center" min-width="170" label="附言" prop="postscript"/>
          <el-table-column fixed="right" align="center" min-width="170" label="支付结果" prop="payResult"/>
          <el-table-column fixed="right" align="center" min-width="170" label="结果原因" prop="reason"/>
        </el-table>
        <pagination v-show="bankserialTotal>0" :total="bankserialTotal" :page.sync="bankserialListQuery.page"
                    :limit.sync="bankserialListQuery.limit"
                    @pagination="getBankserialList(account)"/>
      </el-dialog>
    </el-dialog>
    <!-- 新增三方关联对话框 -->
    <el-dialog :visible.sync="editDialogVisible" title="新增三方关联" width="900px">
      <el-form ref="editForm" :rules="editFormRules" :model="editForm" status-icon label-position="right"
               label-width="150px" style="padding-right: 20px;">
        <div style="display: flex">
          <div style="flex: 1; margin-right: 40px">
            <el-form-item label="关联类型" prop="type">
              <el-radio-group v-model="editForm.type">
                <el-radio :label="0">保代公司</el-radio>
                <el-radio :label="1">权益服务商</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="保险公司ID" prop="insuranceID">
              <el-input v-model="editForm.insuranceID" placeholder="保险公司ID"/>
            </el-form-item>
            <el-form-item label="保代公司ID" prop="agentID">
              <el-input v-model="editForm.agentID" placeholder="保代公司ID"/>
            </el-form-item>
            <el-form-item label="保理公司ID" prop="factoringID">
              <el-input v-model="editForm.factoringID" placeholder="保理公司ID"/>
            </el-form-item>
            <el-form-item label="垫资额度" prop="amount">
              <el-input v-model="editForm.amount" placeholder="垫资额度" style="width: 80%"/>
              <span style="margin-left: 10px">万元</span>
            </el-form-item>
            <el-form-item label="垫资总日息" prop="interestAll">
              <el-input v-model="editForm.interestAll" placeholder="垫资总日息" style="width: 80%"/>
              <span style="margin-left: 20px">‱</span>
            </el-form-item>
            <el-form-item label="保理公司日息" prop="interestFactoring">
              <el-input v-model="editForm.interestFactoring" placeholder="保理公司日息"  style="width: 80%"/>
              <span style="margin-left: 20px">‱</span>
            </el-form-item>
            <el-form-item label="服务费账户" prop="serviceAccount">
              <el-input v-model="editForm.serviceAccount" placeholder="服务费账户"/>
            </el-form-item>
          </div>
          <div style="flex: 1">
            <el-form-item label="共管账户号" prop="account">
              <el-input v-model="editForm.account" placeholder="共管账户号"/>
            </el-form-item>
            <el-form-item label="共管账户名称" prop="accName">
              <el-input v-model="editForm.accName" placeholder="共管账户名称"/>
            </el-form-item>
            <el-form-item label="共管账户银行代码" prop="bankCode">
              <el-input v-model="editForm.bankCode" placeholder="共管账户银行代码"/>
            </el-form-item>
            <el-form-item label="共管账户联行号" prop="interBankNo">
              <el-input v-model="editForm.interBankNo" placeholder="共管账户联行号"/>
            </el-form-item>
            <el-form-item label="共管账户渠道编号">
              <el-input v-model="editForm.channelNo" placeholder="共管账户渠道编号"/>
            </el-form-item>
            <el-form-item label="是否代付中转">
              <el-switch v-model="editForm.isRepay"></el-switch>
            </el-form-item>
            <el-form-item label="代付账号">
              <el-input v-model="editForm.repayAccount" :disabled="!editForm.isRepay" placeholder="代付账号"/>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doEdit">{{dialogStatus == 'create' ? '新增' : '确定'}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {doGet, doPost} from '@/api'
  import {cities} from '@/utils/base'
  import {parseTime} from '@/utils'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import checkPermission from '@/utils/permission' // 权限判断函数

  export default {
    name: 'correlation',
    components: {Pagination},
    filters: {
      // accTyped: function(val){
      //     return function (val){
      //         return {0: "服务费账户",1: "代付账户"}[val] || "未知"
      //     }
      // },
    },
    data() {
      return {
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
        },
        dialogStatus: 'create',
        editForm: {
          type: undefined,
          insuranceID: undefined,
          agentID: undefined,
          factoringID: undefined,
          amount: undefined,
          interestAll: undefined,
          interestFactoring: undefined,
          serviceAccount: undefined,
          account: undefined,
          accName: undefined,
          bankCode: undefined,
          interBankNo: undefined,
          channelNo: undefined,
          isRepay: 0,
          repayAccount: undefined
        },
        editFormRules: {
          type: [{required: true, message: '请选择关联类型', trigger: 'blur'}],
          insuranceID: [{required: true, message: '保险公司ID不允许为空', trigger: 'blur'}],
          agentID: [{required: true, message: '保代公司ID不允许为空', trigger: 'blur'}],
          factoringID: [{required: true, message: '保理公司ID不允许为空', trigger: 'blur'}],
          amount: [{required: true, message: '垫资额度不允许为空', trigger: 'blur'}],
          interestAll: [{required: true, message: '垫资总日息不允许为空', trigger: 'blur'}],
          interestFactoring: [{required: true, message: '保理公司日息不允许为空', trigger: 'blur'}],
          serviceAccount: [{required: true, message: '服务费账户不允许为空', trigger: 'blur'}],
          account: [{required: true, message: '共管账户号不允许为空', trigger: 'blur'}],
          accName: [{required: true, message: '共管账户名称不允许为空', trigger: 'blur'}],
          bankCode: [{required: true, message: '共管账户银行代码不允许为空', trigger: 'blur'}],
          interBankNo: [{required: true, message: '共管账户联行号不允许为空', trigger: 'blur'}]
        },
        editDialogVisible: false,
        cities: cities,
        acclistDialogVisible: false, // 账户列表对话框显示标志
        acclistLoading: false, // 查看账户列表loading标志
        acclist: [], // 账户列表数据
        acclistDialogChildVisible: false, // 增加服务商账户对话框显示标志
        editChildForm: {
          payRecv: undefined,
          startDate: undefined,
          endDate: undefined
        },
        editChildFormRules: {
          queryDate: [{required: true, message: '请选择查询日期', trigger: 'blur'}]
        },
        id: undefined,
        bankserialList: [], // 明细列表
        bankserialListLoading: false,
        bankserialTotal: 0,
        bankserialListQuery: {
          page: 1,
          limit: 20,
        },
        account: undefined, // 指定账户号
      }
    },
    created() {
      this.getList()
    },
    methods: {
      checkPermission,

      // 获取三方关联列表
      getList() {
        this.listLoading = true
        doGet('correlation.html?op=list', this.listQuery).then(response => {
          this.list = response.rows
          this.total = response.rows.length
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },

      // 获取余额列表
      getAccList(account) {
        this.acclistLoading = true
        doGet('balance.html?op=search', {account}).then(response => {
          this.acclist = response.rows
          this.acclistLoading = false
        }).catch(() => {
          this.acclist = []
          this.acclistLoading = false
        })
      },

      // 弹出新增三方关联对话框
      handleAdd() {
        Object.keys(this.editForm).forEach(item => {
          if (item == 'isRepay') {
            this.editForm[item] = 0
          } else {
            this.editForm[item] = undefined
          }
        })
        this.editDialogVisible = true
        this.dialogStatus = "create"
        this.$nextTick(() => {
          this.$refs['editForm'].clearValidate()
        })
      },

      // 弹出修改三方关联信息对话框
      handleEdit(row) {
        this.editForm = Object.assign({}, row);
        this.editIndex = this.list.indexOf(row);
        this.dialogStatus = "update"
        this.editDialogVisible = true
        this.$nextTick(() => {
          this.$refs['editForm'].clearValidate()
        })
      },

      // 提交三方关联信息
      doEdit() {
        this.$refs['editForm'].validate(valid => {
          if (valid) {
            this.editForm.isRepay = this.editForm.isRepay ? 1 : 0
            doGet(`correlation.html?op=${this.dialogStatus == 'create' ? 'add' : 'chg'}`, this.editForm)
              .then(response => {
                this.getList()
                this.editDialogVisible = false
                this.$notify.success({
                  title: '成功',
                  message: this.dialogStatus == 'create' ? '添加三方关联成功' : '修改三方关联信息成功'
                })
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.message
                })
              })
          }
        })
      },

      // 删除三方关联
      doDelete(row) {
        doGet("correlation.html?op=del", {...row, id: row.ID})
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除保理公司成功'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
          })
      },

      // 弹出余额对话框
      handleBalance(row) {
        this.acclist = []
        this.acclistDialogVisible = true
        this.getAccList(row.account)
      },

      // 弹出账户明细对话框
      handleBankserial(row) {
        this.account = row.account
        this.editChildForm.payRecv = 2
        this.editChildForm.startDate = parseTime(new Date(), '{y}-{m}-{d}')
        this.editChildForm.endDate = parseTime(new Date(), '{y}-{m}-{d}')
        this.acclistDialogChildVisible = true
        this.$nextTick(() => {
          this.$refs['editChildForm'].clearValidate()
        })
        this.getBankserialList(this.account)
      },

      // 获取明细列表
      getBankserialList(account) {
        this.bankserialListLoading = true
        let setData = {
          account: account,
          payRecv: this.editChildForm.payRecv == 2 ? undefined : this.editChildForm.payRecv,
          startDate: this.editChildForm.queryDate[0],
          endDate: this.editChildForm.queryDate[1],
          ...this.bankserialListQuery
        }
        doGet('bankserial.html?op=search', setData).then(response => {
          this.bankserialList = response.rows
          this.bankserialTotal = response.rows.length
          this.bankserialListLoading = false
        }).catch(() => {
          this.bankserialList = []
          this.bankserialTotal = 0
          this.bankserialListLoading = false
        })
      },

      // 查询明细列表
      doQuery() {
        this.$refs['editChildForm'].validate(valid => {
          if (valid) {
            this.getBankserialList(this.account)
          }
        })
      }
    }
  }
</script>
